<template>
    <div>
        <Row class="margin-top-10">
            <Card>
                <p slot="title" class="card-title">
                    <Row class="" :gutter="10">
                        <Col :md="4" :lg="2">
                            <div style="margin-top: 2px;">
                                <Icon type="ios-pulse"></Icon>
                                {{this.$route.meta.title}}
                            </div>
                        </Col>
                        <Col :md="20" :lg="22">
                            <Form :model="formItem" label-position="left" inline>
                                <span>彩种：</span>
                                <Select v-model="model2" @on-change="changeLottery" size="small" style="width:120px">
                                    <Option v-for="(item,index) in lottery" :value="index" :key="index">{{ item.name }}</Option>
                                </Select>
                                <span>期数：</span>
                                <Input size="small" v-model="formItem.input" style="width: 120px" placeholder="请输入期数"></Input>
                                <span>时间范围：</span>
                                <DatePicker size="small"  :value="formItem.time" @on-change="setTime" type="daterange" placeholder="Select date and time" style="width: 200px"></DatePicker>
                                <Button type="primary"  size="small" style="margin-top: 0px;" @click="search">查询</Button>
                                <Button type="ghost"  size="small" style="margin-top: 0px;" @click="searchReset">重置</Button>
                            </Form>
                        </Col>
                    </Row>
                </p>
                <div class="line-chart-con">
                    <Table border stripe :columns="title" :data="data" ></Table>
                    <Row class="margin-top-10" :gutter="10">
                        <Col :md="12" :lg="12">
                            <Page :total="page.count" :current.sync="page.current" class-name="page-margin-top" show-elevator @on-change="pageTurn" show-sizer @on-page-size-change="listDisplayQuantity"></Page>
                        </Col>
                        <Col :md="12" :lg="12">
                            
                        </Col>
                    </Row>
                    
                </div>
            </Card>
        </Row>
    </div>
</template>
<style lang="less">
    .ivu-card-head-inner, .ivu-card-head p{
        height: auto;
        overflow: inherit;
    }
    .page-margin-top{
        margin-top:10px;
    }
    .ivu-modal-wrap{
        display: flex;
        align-items: center;
        justify-content: center;

        .ivu-modal{
            top: 0;
        }
    }
</style>
<script>


export default {
    components: {
        
    },
    data () {
        return {
            formItem:{
                    input:'',
                    time:[],
            },
            lottery: [],
            model2:0,
            data:[],
            page:{
                count:0,
                current:1,
                limit:'0,10'
            },
            queryData:{
                issue:{
                    operator:'=',
                    value:''
                },
                gid:{
                    operator:'=',
                    value:'1'
                }
            },
            title:[
                {
                    title:'彩种',
                    key: 'lt_name',
                    align:'center',
                    // width:'100'
                },
                {
                    title:'期数',
                    key: 'issue',
                    align:'center',
                    // width:'90'
                },
                {
                    title:'开奖时间',
                    key: 'open_time',
                    align:'center',
                },
                {
                    title:'开奖号',
                    key: 'open_number',
                    align:'center',
                },
                {
                    title:'下期期号',
                    key: 'next_issue',
                    align:'center',
                },
                {
                    title:'下期开奖时间',
                    key: 'next_open_time',
                    align:'center',
                },
                {
                    title:'参与人数',
                    key: 'total_people',
                    align:'center',
                },
                {
                    title:'投注金额',
                    key: 'sum_order_money',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.sum_order_money
                               }
                           })
                    },
                },
                {
                    title:'中奖金额',
                    key: 'sum_bonus',
                    align:'center',
                    render: (h, params) => {
                           return h('oc-Filter',{
                               props:{
                                   money:params.row.sum_bonus
                               }
                           })
                    },
                },
                // {
                //     title:'操作',
                //     key: '',
                //     width: 200,
                //     align:'center',
                //     render: (h, params) => {
                //            return h('div', [
                //                 h('Button', {
                //                     props: {
                //                         type: 'info',
                //                         size: 'small',
                                        
                //                     },
                //                     style: {
                //                         marginRight: '5px',
                //                     },
                //                     on: {
                //                         click: () => {
                                           
                //                         },
                //                     },
                                    
                //                 }, '编辑'),
                //                 h('Button', {
                //                     props: {
                //                         type: 'info',
                //                         size: 'small',
                //                     },
                //                     style: {
                //                         marginRight: '5px',
                //                     },
                //                     on: {
                //                         click: () => {
                                            
                //                         }
                //                     }
                //                 },'重开')
                //             ]);
                //     }
                // },
            ]
                
            
        }
    },
    computed: {
        
    },
    methods: {
        init(){
            this.formItem.time=this.getNowFormatDate()
            this.getGamekjData()
        },
        search(){
            this.queryData.issue.value=this.formItem.input
            this.getGamekjData()
        },
        searchReset(){
            this.queryData.issue.value=''
            this.formItem.input=''
            this.formItem.time=this.getNowFormatDate()
            this.getGamekjData()
        },
        changeLottery(e){
            this.queryData.gid.value=this.lottery[e].id
            this.getGamekjData()
        },
        getGamekjData(){
            let data={
                limit:this.page.limit,
                // order_param:this.order_param,
                query_params:this.$oc.ocqm(this.queryData),
                time_between:`${this.formItem.time[0]},${this.formItem.time[1]}`
            }
            this.$api.repeater(this,'getGamekjData',data).then(res=>{
                if(res.success==true){
                    this.page.count=res.data.Count
                    if(res.data.Records!==null){
                        this.data=res.data.Records
                    }else{
                        this.data=[]
                    }
                }else{
                }
            })
            // this.$api.getGamekjData(data).then(response=>{
            //     response.json().then(responseJson=> {
            //         if(responseJson.success==true){
            //             this.page.count=responseJson.data.Count
            //             if(responseJson.data.Records!==null){
            //                 this.data=responseJson.data.Records
            //             }else{
            //                 this.data=[]
            //             }
            //         }else{

            //         }
                    
                    
            //     })
            // })
        },
        setTime(t){
            this.formItem.time=t
        },
        //翻页
        pageTurn(ev){
            let limit=this.page.limit.split(",");
            this.page.limit=`${(ev-1)*limit[1]},${limit[1]}`
            this.getGamekjData()
        },
        //列表显示行数
        listDisplayQuantity(ev){
            this.page.limit=`0,${ev}`
            this.getGamekjData()
        },
        //回到第一页
        startPage(){
            this.page.current=1
            let limit=this.page.limit.split(",");
            this.page.limit=`0,${limit[1]}`
        },
        setTime(t){
            this.formItem.time=t
        },
        getNowFormatDate () {
            let time = (data) =>{
                let date = new Date();
                if(data) date.setDate(date.getDate()+data);
                let Y = date.getFullYear()
                let M = date.getMonth() + 1;
                let D = date.getDate();
                let h = date.getHours()
                let m = date.getMinutes()
                let s = date.getSeconds()
                if (M >= 1 && M <= 9) M = "0" + M;
                if (D >= 0 && D <= 9) D = "0" + D;
                if (h >= 0 && h <= 9) h = "0" + h;
                if (m >= 0 && m <= 9) m = "0" + m;
                if (s >= 0 && s <= 9) s = "0" + s;
                return `${Y}-${M}-${D}`
            }
            return [time(-30),time(1)];
        },
    },
    created(){
        this.lottery=JSON.parse(sessionStorage.lottery)
        this.init()
    },
};
</script>
